<template>
    <Modal :mask-closable="false"
        v-model="opened"
        class="modal-content-layout"
        :title="title">
        <Form class="formList" ref="formCustom" :rules="ruleValidate" :model="formItem" label-position="top">

            <FormItem prop="roleId" label="角色名称：" class="textlab">
                <Select v-model="formItem.roleId"
                        clearable
                        filterable
                        :placeholder="`${$t('common.selectInfo')}`">
                    <Option v-for="item in roleList"
                            :value="item.id"
                            :key="item.id"
                            :label="item.name"
                    />
                </Select>
            </FormItem>

            <FormItem prop="status" label="状态：" class="textlab">
                <RadioGroup v-model="formItem.status">
                    <Radio :label="0">{{$t('common.disable')}}</Radio>
                    <Radio :label="1">启用</Radio>
                </RadioGroup>
            </FormItem>

        </Form>
        <div slot="footer">
            <Button type="default" @click="close">{{$t('common.Cancle')}}</Button>
            <Button type="primary" :loading="submitLoading" @click="submit">{{$t('maintenance.Confirmed')}}</Button>
        </div>
    </Modal>
</template>

<script>
import {getRoleByName} from '@/api/index.js'
import { addRoleSuper, updateRoleSuper } from "@/api/system/organization";

export default {
    name: '',
    data() {
        return {
            opened: false,
            title: '添加角色',
            formItem: {
                roleId: '',
                status: 1
            },
            roleList: [],
            submitLoading: false,
            ruleValidate: {
                roleId: [
                    {required: true, type: 'number', message: 'role cannot be empty', trigger: 'blur'}
                ],
                status: [
                    {required: true, type: 'number', message: 'status cannot be empty', trigger: 'blur'}
                ],
            }
        }
    },
    methods: {
        getRoleByName() {
            getRoleByName().then(res => {
                if(res.code === 200){
                    this.roleList = res.data;
                }else{
                    this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            })
        },
        open( currentNode, submitTo) {

            this.submitTo = submitTo;

            if(submitTo === 'add'){
                this.title = '新增角色'
                this.formItem = {
                    parentId: currentNode.id || 0,
                    roleId: '',
                    status: 1
                }
            }else{
                this.title = '编辑角色'
                this.formItem = {
                    parentId: currentNode.parentId || 0,
                    roleId: currentNode.roleId,
                    status: currentNode.status,
                    id: currentNode.id
                }
            }

            console.log(this.formItem);

            this.submitLoading = false;
            this.opened = true;
        },
        close() {
            this.opened = false;
        },
        submit() {

            this.$refs['formCustom'].validate((valid) => {
                if (valid) {
                    this.submitLoading = true;
                    if(this.submitTo === 'add'){
                        this.add();
                    }else{
                        this.edit();
                    }
                }
            });
        },
        edit(){
            updateRoleSuper(this.formItem).then(res =>{
                if(res.code === 200){
                    this.close();
                    this.$Message.success(res.msg);
                    this.$emit('save');
                }else{
                    this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            }).finally(() =>{
                this.submitLoading = false;
            })
        },
        add(){
            addRoleSuper(this.formItem).then(res =>{
                if(res.code === 200){
                    this.close();
                    this.$Message.success(res.msg);
                    this.$emit('save');
                }else{
                    this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            }).finally(() =>{
                this.submitLoading = false;
            })
        }
    },
    mounted (){
        this.getRoleByName();
    }
}
</script>
